<style lang="less">
@import "./articleManage.less";
</style>
<template>
  <div class="search" style="background-color:white">
    <template>
      <Form ref="articleDetailForm" :model="articleDetailForm" :label-width="110" :rules="articleDetailFormValidate">

        <div style="overflow:hidden;">
          <div style="width: 500px;float:left">
            <Form-item label="文章标题:" prop="title" style="padding-top:16px;">
              <Input type="text" v-model="articleDetailForm.title" clearable placeholder="请输入文章标题" style="width: 400px" :disabled="showModal"/>
            </Form-item>
            <Form-item label="文章类型:" prop="catId">
              <Input type="text" v-model="articleDetailForm.catId" clearable placeholder="请输入文章类型" style="width: 400px" :disabled="showModal"/>
            </Form-item>
            <Form-item label="作者:" prop="author">
              <Input type="text" v-model="articleDetailForm.author" clearable placeholder="请输入文章作者" style="width: 400px" :disabled="showModal"/>
            </Form-item>
            <Form-item label="作者邮箱:" prop="authorEmail">
              <Input type="text" v-model="articleDetailForm.authorEmail" clearable placeholder="请输入文章作者邮箱" style="width: 400px" :disabled="showModal"/>
            </Form-item>

            <Form-item label="文章内容:" prop="content">
              <textarea v-model="articleDetailForm.content" style="width:400px;height:120px;resize:none;line-height:2.0;border:1px solid #dddee1;" :disabled="showModal"/>
            </Form-item>
          </div>
        </div>

        <!-- <hr style="border-bottom:1px solid #dddee1; height:1px;"> -->
      </Form>

      <div style="padding:16px 0px;margin-left:2px;" class="operation">
        <Button @click="cancelSubmitArticle" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
        <!-- <Button :loading="submitLoading" @click="submitHotel" type="primary" :icon="hotelButtonTypeIcon" style="width:120px;">{{hotelButtonTypeText}}</Button> -->
        <Button v-if="!showModal" :loading="submitLoading" @click="submitArticle" type="primary" :icon="articleButtonTypeIcon" style="width:120px;">{{articleButtonTypeText}}</Button>

      </div>
      <!-- <supplier-search-comp ref="supplierSearchModal" @on-selected='selectedSupplier'></supplier-search-comp> -->
    </template>
  </div>
</template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";
import tinymce from "tinymce";

// import ImageComponent from "./imageComponent.vue"
// import SupplierSearchComp from "./supplierSearchComp.vue"

export default {
  name: "article-detail",
  // components: {
  //   ImageComponent,
  //   SupplierSearchComp
  // },
  data() {
    return {
      loading: true,
      articleDetailForm: {
        title: "",
        catId: "",
        author: "",
        authorEmail: "",
        content: ""
      },
      articleDetailModalType: 0,
      articleButtonTypeText: "添加",
      articleButtonTypeIcon: "plus-round",
      showModal: false,

      articleDetailFormValidate: {
      },
      submitLoading: false
    };
  },
  methods: {
    init() {},

    resetFormByType: function(type, updatearticle) {
      console.log(updatearticle);
      this.showModal = false;
      if (0 === type) {
        this.articleDetailModalType = 0;
        this.articleButtonTypeText = "添加";
        this.articleButtonTypeIcon = "plus-round";
      } else if (1 === type) {
        this.articleDetailModalType = 1;
        this.articleButtonTypeText = "编辑";
        this.articleButtonTypeIcon = "edit";
        this.articleDetailForm = updatearticle;
      } else if(2 === type){
        this.articleDetailForm = updatearticle;
        this.articleDetailModalType = 2;
        this.showModal = true;
      } else {}

      this.$refs.articleDetailForm.resetFields();
      for (let attr in this.articleDetailForm) {
        if (this.articleDetailForm[attr] == null) {
          this.articleDetailForm[attr] = "";
        }
      }
    },

    popSupplierSearchMoadl: function() {
      this.$refs.supplierSearchModal.openSupplierSearchModal(true);
    },
    selectedSupplier(res) {
      this.currSelectedSupplier = res;
      this.articleDetailForm.supplierId = res.id;
    },

    submitArticle() {
      this.$refs.articleDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          if (this.articleDetailModalType === 1) {
            url = "/article/update";
            this.submitLoading = true;
            this.postRequest(url, this.articleDetailForm).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");
                this.$emit("on-article-success", true);
                // this.init();
              }
            });
          } else {
            url = "/article/create";
            this.submitLoading = true;
            var createarticle = this.articleDetailForm;
            if (createarticle.id) delete createarticle.id;
             createarticle.flag = '0';
            this.postRequest(url, createarticle).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("操作成功");
                this.$emit("on-article-success", true);
              }
            });
          }
        }
      });
    },
    cancelSubmitArticle: function() {
      this.$emit("on-article-cancel", true);
    }
  },
  mounted() {
    this.init();

    //picture mounted start
    // this.uploadList = this.$refs.upload.fileList;
    //picture mounted end
  }
};
</script>
